import "./styles/index.css"
import {
  createBrowserRouter,
  Route,
  RouterProvider,
  createRoutesFromElements,
  redirect,
} from "react-router-dom"
import { Routes } from "@/shared/consts"
import MenuLayout from "@/layouts/MenuLayout"
import AppLayout from "@/layouts/AppLayout"
import AuthPage from "@/pages/AuthPage"
import PrivateRoute from "@/shared/components/PrivateRoute"
import NoLayout from "@/layouts/NoLayout"

import RegisterPage from "@/pages/RegisterPage"
import { z } from "zod"
import AuthLayout from "@/layouts/AuthLayout"
import LoginPage from "@/pages/LoginPage"
import AnimalsPage from "@/pages/AnimalsPage"
import AnimalPage from "@/pages/AnimalPage"
import NewRequestPage from "@/pages/NewRequestPage"
import ProfilePage from "@/pages/ProfilePage"
import MyRequestsPage from "@/pages/MyRequestsPage"
import "react-image-gallery/styles/css/image-gallery.css"

const customErrorMap: z.ZodErrorMap = (issue, ctx) => {
  if (
    issue.code === z.ZodIssueCode.invalid_string &&
    issue.validation === "email"
  ) {
    return { message: "Введите корректный Email" }
  }
  if (issue.code === z.ZodIssueCode.custom) {
    return { message: `less-than-${(issue.params || {}).minimum}` }
  }
  return { message: ctx.defaultError }
}

z.setErrorMap(customErrorMap)

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<AppLayout />}>
      <Route path={Routes.Dogs}>
        <Route element={<MenuLayout />}>
          <Route path="" element={<AnimalsPage />} />
        </Route>
        <Route element={<NoLayout />}>
          <Route path={`${Routes.Dogs}/:animalId`} element={<AnimalPage />} />
          <Route element={<PrivateRoute />}>
            <Route
              path={`${Routes.Dogs}/:animalId/request`}
              element={<NewRequestPage />}
            />
          </Route>
        </Route>
      </Route>
      <Route element={<MenuLayout />}>
        <Route element={<PrivateRoute />}>
          <Route path={Routes.MyDog} element={<MyRequestsPage />} />
          <Route path={Routes.Profile} element={<ProfilePage />} />
        </Route>
      </Route>
      <Route element={<NoLayout />}>
        <Route path={Routes.Auth} element={<AuthLayout />}>
          <Route path="login" element={<LoginPage />} />
          <Route path="register" element={<RegisterPage />} />
          <Route path="" element={<AuthPage />} />
        </Route>
      </Route>
      <Route path="/*" loader={() => redirect(Routes.Dogs)} />
    </Route>,
  ),
)

const App = () => {
  return (
    <div className="App">
      <RouterProvider router={router} />
    </div>
  )
}

export default App
